<script>
export default {
    name: "My",
    data(){
        return {
            username:""
        }
    },
    methods:{
        outLogin(){
            localStorage.clear();
            this.$router.push({
                path:"/login",
                query:{
                    returnUrl:this.$route.fullPath
                }
            });
        }
    },
    beforeCreate() {
        console.log("beforeCreate");
    },
    created(){
        console.log("created");
    },
    beforeMount() {
        console.log("beforeMount");
    },
    mounted(){
        console.log("mounted");
    },
    // 进入路由之前会执行该钩子函数:会在beforeCreate之前执行。
    beforeRouteEnter(to,from,next){
        console.log("beforeRouteEnter")
        // 从首页跳转到个人中心
        // 去哪：个人中心
        // console.log("beforeRouteEnter->to",to);
        // 从哪来：首页
        // console.log("beforeRouteEnter->from",from);
        // next:是一个函数
        // console.log("beforeRouteEnter->next",next);




        // next();// 放行
        // next(true);// 放行
        // next(false);// 不放行，相当于没写

        // next("/login");// 可以实现类似于this.$pages.push的作用
        // console.log("this",this);// undefined
        if(localStorage.getItem("username")) {
            next(function(cm){
                // beforeMount之后mounted之前
                // console.log("next->回调函数",cm);
                // cm:当前组件实例
                cm.username = localStorage.getItem("username");
            })
        }
        else{
            next({
                path:"/login",
                query:{
                    returnUrl:to.fullPath
                }
            })
        }

    }
}
</script>

<template>
    <div>
        <h3>欢迎<span style="color:red">{{username}}</span>的到来</h3>
        <button @click="outLogin">退出登陆</button>
    </div>

</template>

<style scoped>

</style>